{% extends '_base.html' %}

{% block style %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
<style>
    {% if site_config.get('index_bg') %}
    header {
        background-image: url({{ site_config.get('index_bg') }});
    }
    {% endif %}
</style>
{% endblock %}

{% block title %}
Index
{% endblock %}

{% block header_content %}
<div class="container-flex">
    <div class="content">
        <div class="logo">
            <a href="{{ url_for('views.login') }}">
                <img src="{{ url_for('static', filename='img/logo.jpg') }}" alt="">
            </a>
        </div>

        <div class="info">
            <div class="quote">
                {{site_config.get('to_quote')}}
            </div>
            <div class="social">
                <a href="#" class="item">
                    <img src="{{ url_for('static', filename='img/icon/QQ-circle-fill.png') }}" alt="">
                </a>

                <a href="#" class="item">
                    <img src="{{ url_for('static', filename='img/icon/微信.png') }}" alt="">
                </a>

                <a href="#" class="item">
                    <img src="{{ url_for('static', filename='img/icon/bilibili-fill.png') }}" alt="">
                </a>

                <a href="#" class="item">
                    <img src="{{ url_for('static', filename='img/icon/youtube.png') }}" alt="">
                </a>
            </div>
        </div>
    </div>
</div>
<div class="center-video">
    <div class="video-btn"> </div>
    <video loop src="{{ site_config.get('video_url') }}"></video>
</div>
{% endblock %}


{% block main_content %}
<div class="focus">
    <div class="title">焦点内容</div>
    <div class="focus-list">
        <div class="focus-item">
            <a href="./article">
                <div class="focus-bg" style="background-image:url({{ url_for('static', filename='img/a.jpg') }})"></div>
                <div class="focus-title">22223333333333</div>
                <div class="focus-desc">Lorem ipsum dolor sit, amet consectetur adipisicing</div>
            </a>
        </div>

        <div class="focus-item">
            <a href="#">
                <div class="focus-bg" style="background-image:url({{ url_for('static', filename='img/b.jpg') }})"></div>
                <div class="focus-title">22223333333333</div>
                <div class="focus-desc">Lorem ipsum dolor sit, amet consectetur adipisicing</div>
            </a>
        </div>

        <div class="focus-item">
            <a href="#">
                <div class="focus-bg" style="background-image:url({{ url_for('static', filename='img/c.jpg') }})"></div>
                <div class="focus-title">22223333333333</div>
                <div class="focus-desc">Lorem ipsum dolor sit, amet consectetur adipisicing</div>
            </a>
        </div>

    </div>
</div>
<div class="post">
    <div class="title">最新发布</div>
    <div class="post-list">
        <div class="post-item">
            <div class="picture">
                <a href="#" style="background-image: url({{ url_for('static', filename='img/img1.jpg') }})"></a>
            </div>
            <div class="text">
                <div class="post-title">
                    <a href="#">
                        Lorem ipsum dolor
                    </a>
                </div>
                <div class="post-desc">
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                </div>
                <div class="post-info">
                    <span>11月8日</span> -
                    <span>2000观看</span> -
                    <span>100评论</span>
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <div class="post-item right">
            <div class="picture">
                <a href="#" style="background-image: url({{ url_for('static', filename='img/img1.jpg') }});"></a>
            </div>
            <div class="text">
                <div class="post-title">
                    <a href="#">
                        Lorem ipsum dolor
                    </a>
                </div>
                <div class="post-desc">
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                </div>
                <div class="post-info">
                    <span>11月8日</span> -
                    <span>2000观看</span> -
                    <span>100评论</span>
                    <a href="#"></a>
                </div>
            </div>
        </div>
        <div class="post-item">
            <div class="picture">
                <a href="#" style="background-image: url({{ url_for('static', filename='img/img1.jpg') }});"></a>
            </div>
            <div class="text">
                <div class="post-title">
                    <a href="#">
                        Lorem ipsum dolor
                    </a>
                </div>
                <div class="post-desc">
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                </div>
                <div class="post-info">
                    <span>11月8日</span> -
                    <span>2000观看</span> -
                    <span>100评论</span>
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <div class="post-item right">
            <div class="picture">
                <a href="#" style="background-image: url({{ url_for('static', filename='img/d.jpg') }});"></a>
            </div>
            <div class="text">
                <div class="post-title">
                    <a href="#">
                        Lorem ipsum dolor sit amet consectetur a
                    </a>
                </div>
                <div class="post-desc">
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                </div>
                <div class="post-info">
                    2021年11月8日 - 2000观看 - 100评论
                </div>
            </div>
        </div>

        <div class="post-item">
            <div class="picture">
                <a href="#" style="background-image: url({{ url_for('static', filename='img/a.jpg') }});"></a>
            </div>
            <div class="text">
                <div class="post-title">
                    <a href="#">
                        Lorem ipsum dolor sit amet consectetur a
                    </a>
                </div>
                <div class="post-desc">
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                </div>
                <div class="post-info">
                    2021年11月8日 - 2000观看 - 100评论
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <div class="post-item right">
            <div class="picture">
                <a href="#" style="background-image: url({{ url_for('static', filename='img/bg1.jpg') }});"></a>
            </div>
            <div class="text">
                <div class="post-title">
                    <a href="#">
                        Lorem ipsum dolor sit amet consectetur a
                    </a>
                </div>
                <div class="post-desc">
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                    Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                </div>
                <div class="post-info">
                    2021年11月8日 - 2000观看 - 100评论
                    <a href="#"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="previous">
        <a href="#" class="btn">Previous</a>
    </div>
</div>
{% endblock %}
{% block extra %}
<div id="music">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    <div id="play">
        <meting-js server="netease" mini="true" theme="#66ccff" type="playlist" id="4869028526" fixed="true"
            autoplay="false" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="340px"
            lrc-type="1" mutex="true">
        </meting-js>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    function videoPlay() {
        let v = document.querySelector('.center-video video')
        let b = document.querySelector('.center-video .video-btn')
        let c = document.querySelector('header .content')

        b.addEventListener('click', function () {
            if (v.paused === true) {
                c.classList.add('move')
                v.style.display = 'block'
                v.play()
                b.style.backgroundImage = 'url({{ url_for('static', filename='img/icon/暂停.png') }})'
            } else {
                c.classList.remove('move')
                v.pause()
                b.style.backgroundImage = 'url({{ url_for('static', filename='img/icon/播放.png') }})'
            }
        })
    }
    videoPlay()
</script>
<script>
    let play = document.querySelector('#play')
    setInterval(function () {
        if (document.documentElement.scrollTop > 0) {
            play.hidden = false
        } else {
            play.hidden = true
        }
    }, 100)
</script>
<script>
    let btn = document.querySelector('.previous .btn')
    let post = document.querySelector('.post-list')
    let postItems = document.querySelectorAll('.post-item')
    function div() {
        let d = document.createElement('div')
        d.classList.add('post-item')

        let d1 = document.createElement('div')
        d1.classList.add("picture")
        let a = document.createElement('a')
        a.style.backgroundImage = "url({{ url_for('static', filename='img/bb.jpg') }})"
        d1.appendChild(a)

        let text = document.createElement('div')
        text.classList.add('text')
        let title = document.createElement('div')
        title.classList.add('post-title')
        let ta = document.createElement('a')
        ta.href = "#"
        ta.innerText = "234567654321234"
        title.appendChild(ta)
        text.appendChild(title)

        let desc = document.createElement('div')
        desc.classList.add('post-desc')
        desc.innerText = "vfbuadhajvhafkdjooJDIOA"
        text.appendChild(desc)

        let info = document.createElement('div')
        info.classList.add('post-info')
        info.innerText = "2021年11月8日 - 2000观看 - 100评论"
        text.appendChild(info)


        d.appendChild(d1)
        d.appendChild(text)
        return d
    }
    btn.addEventListener('click', function (e) {
        e.preventDefault()

        for (let i = 0; i < 3; i++) {
            let itemsLength = document.querySelectorAll('.post-item').length
            d = div()
            if (((itemsLength + 1) % 2) === 0) {
                d.classList.add("right")
            }
            post.appendChild(d)
        }

    })
</script>
{% endblock %}